<div class="cly-vue-data-manager" v-bind:class="[componentId]">
    <event-group-drawer @close="closeDrawer" :controls="drawers.eventgroup"></event-group-drawer>
    <cly-header>
        {{eventGroup}}
        <template v-slot:header-left>
            <div>
                <cly-back-link link="/manage/data-manager/events/event-groups" title="Back to Manage Event Groups"></cly-back-link>
                <div class="bu-mt-4">
                    <h3 class="bu-is-capitalize" v-html="eventGroup.name"></h3>
                </div>
                <div class="bu-mt-4 bu-mr-2">
                    <span v-if="eventGroup.status === false" class="cly-vue-data-manager__hidden-icon"><i class="ion-eye-disabled"></i></span>
                    <span v-else class="cly-vue-data-manager__hidden-icon"><i class="ion-eye"></i></ion-icon></span>
                </div>
            </div>
        </template>
        <template v-slot:header-right>
            <div class="bu-mt-6">
                <el-button v-if="canUserUpdate" @click="handleEdit" size="small" icon="el-icon-edit">Edit Group</el-button>
                <cly-more-options v-if="canUserDelete" class="bu-ml-2" size="small" @command="handleCommand($event, eventGroup)">
                    <el-dropdown-item command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                </cly-more-options>
            </div>
        </template>
    </cly-header>
    <cly-section class="bu-mx-5 cly-vue-data-manager__box-container--boxed">
        <div class="bu-columns bu-is-gapless">
            <div class="bu-column">
                <div class="bu-mx-5 bu-mt-5">
                    <div class="bu-mt-5">
                        <span class="text-medium font-weight-bold text-uppercase">
                            {{ i18n('data-manager.event-group-details') }}
                        </span>
                        <table class="bu-mt-1 cly-vue-data-manager__box-container__table text-medium">
                            <colgroup>
                                <col width="30%" />
                                <col width="70%" />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td><span>{{ i18n('data-manager.description') }}</span>
                                    </td>
                                    <td v-html="eventGroup.description"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>{{ i18n('data-manager.included-events') }}</span>
                                    </td>
                                    <td>
                                        <div class="bu-mb-2" v-for="e in eventGroup.source_events"><div v-html="e"></div></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </cly-section>
    <cly-confirm-dialog 
    @cancel="closeDeleteForm" 
    @confirm="submitDeleteForm" 
    :before-close="closeDeleteForm" 
    ref="deleteConfirmDialog" 
    :visible.sync="showDeleteDialog" 
    dialogType="danger" 
    :saveButtonLabel="i18n('common.delete')" 
    :cancelButtonLabel="i18n('common.no-dont-delete')" 
    title="Delete Event Group" >
        <template slot-scope="scope">
            {{ i18n('data-manager.delete-event-group-permanently') }}<br/> 
            <small class="color-red-100"> {{i18n('data-manager.delete-event-warning')}} </small>
            <ul>
             <li v-if="deleteElement"><div v-html="deleteElement.name"></div></li>
            </ul>
        </template>
    </cly-confirm-dialog>
</div>